// 同意服务条款选择框点击事件
(function () {
  // 获取点击 input 
  const head = document.querySelector('#head')
  // flag为true表示默认已勾选,false表示未勾选
  let flag = true
  head.addEventListener('click', function () {
    flag = !flag
    if (flag === true) {
      document.querySelector('.head').style.backgroundPosition = '0 -27px'
      // 灰色遮罩隐藏
      document.querySelector('.vip_content').style.display = 'none'
      // 更换选中充值类型右上角图标为蓝色
      document.querySelector('.money_item.active i').style.backgroundPosition = '-113px 291px'
      // 更换选中充值类型边框为蓝色
      document.querySelector('.money_item.active').style.borderColor = '#3387ef'
      // 更换选中 支付方式 右上角图标为蓝色
      document.querySelector('.paytype.active i').style.backgroundPosition = '-113px 291px'
      // 更换选中 支付方式 边框为蓝色
      document.querySelector('.paytype.active').style.borderColor = '#3387ef'
      // 显示支付二维码图片
      document.querySelector('.pay_img img').style.display = 'block'
    } else {
      document.querySelector('.head').style.backgroundPosition = '0 -43px'
      // 灰色遮罩显示
      document.querySelector('.vip_content').style.display = 'block'
      // 更换选中充值类型右上角图标为灰色
      document.querySelector('.money_item.active i').style.backgroundPosition = '-92px -310px'
      // 更换选中充值类型边框为灰色
      document.querySelector('.money_item.active').style.borderColor = '#999'
      // 更换选 支付方式 右上角图标为灰色
      document.querySelector('.paytype.active i').style.backgroundPosition = '-92px -310px'
      // 更换选中 支付方式 边框为灰色
      document.querySelector('.paytype.active').style.borderColor = '#999'
      // 隐藏支付二维码图片
      document.querySelector('.pay_img img').style.display = 'none'
    }
  })
  document.querySelector('.mod_select_op .select__choose_lvzuan').addEventListener('click', function () {
    const success = localStorage.getItem('success')
    if (success) {
      document.querySelector('.vip_box_money').style.display = 'block'
    } else {
      document.querySelector('.login_box').style.display = 'block'
    }

  })
  // 点击X关闭开通VIP充值面板
  document.querySelector('.vip_header .vip_header_close').addEventListener('click', function () {
    document.querySelector('.vip_box_money').style.display = 'none'

  })
}());

// 点击开通账号类型改变样式
(function () {
  // 获取点击类型
  const types = document.querySelectorAll('.money_item')
  const is = document.querySelectorAll('.vip_type_money i')
  const type1Click = document.querySelector('.money_item.type1')
  const type2Click = document.querySelector('.money_item.type2')
  const type3Click = document.querySelector('.money_item.type3')
  const type4Click = document.querySelector('.money_item.type4')
  type1Click.addEventListener('click', function () {
    for (let i = 0; i < types.length; i++) {
      types[i].classList.remove('active')
    }
    type1Click.classList.add('active')
    // 更换选中充值类型右上角图标为蓝色
    document.querySelector('.money_item.active i').style.backgroundPosition = '-113px 291px'
    // 更换选中充值类型右上角图标为蓝色
    for (let i = 0; i < is.length; i++) {
      is[i].style.display = 'none'
    }
    document.querySelector('.money_item.type1 i').style.display = 'block'
    document.querySelector('.vip_pay_pic p i').innerHTML = '45'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay1.png'

  })
  type2Click.addEventListener('click', function () {
    for (let i = 0; i < types.length; i++) {
      types[i].classList.remove('active')
    }
    type2Click.classList.add('active')
    // 更换选中充值类型右上角图标为蓝色
    for (let i = 0; i < is.length; i++) {
      is[i].style.display = 'none'
    }
    document.querySelector('.money_item.type2 i').style.display = 'block'
    document.querySelector('.vip_pay_pic p i').innerHTML = '90'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay5.png'
  })
  type3Click.addEventListener('click', function () {
    for (let i = 0; i < types.length; i++) {
      types[i].classList.remove('active')
    }
    type3Click.classList.add('active')
    // 更换选中充值类型右上角图标为蓝色
    for (let i = 0; i < is.length; i++) {
      is[i].style.display = 'none'
    }
    document.querySelector('.money_item.type3 i').style.display = 'block'
    document.querySelector('.vip_pay_pic p i').innerHTML = '168'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay2.png'
  })
  type4Click.addEventListener('click', function () {
    for (let i = 0; i < types.length; i++) {
      types[i].classList.remove('active')
    }
    type4Click.classList.add('active')
    // 更换选中充值类型右上角图标为蓝色
    for (let i = 0; i < is.length; i++) {
      is[i].style.display = 'none'
    }
    document.querySelector('.money_item.type4 i').style.display = 'block'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay6.png'
  })
}());

// 点击更换支付方式
(function () {
  // 获取qq和微信支付
  const qqpay = document.querySelector('.vip_pay_type .qqpay')
  const wxpay = document.querySelector('.vip_pay_type .wxpay')
  qqpay.addEventListener('click', function () {
    wxpay.classList.remove('active')
    document.querySelector('.vip_pay_type .wxpay i').classList.remove('active')
    document.querySelector('.vip_pay_type .qqpay i').classList.add('active')
    qqpay.classList.add('active')
    document.querySelector('.vip_pay_pic p span').innerHTML = '手机qq'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay3.png'
  })
  wxpay.addEventListener('click', function () {
    qqpay.classList.remove('active')
    document.querySelector('.vip_pay_type .qqpay i').classList.remove('active')
    document.querySelector('.vip_pay_type .wxpay i').classList.add('active')
    wxpay.classList.add('active')
    document.querySelector('.vip_pay_pic p span').innerHTML = '微信'
    document.querySelector('.vip_pay_pic .pay_img img').src = './images/pay7.png'
  })
}());

// 自定义月份充值
(function () {
  let mon = parseInt(document.querySelector('.custom .month span').innerHTML)
  let price = parseInt(document.querySelector('.type4 .spec p span').innerHTML)
  console.log(mon);
  console.log(price);
  // 获取加号--添加点击事件
  document.querySelector('.btn_add').addEventListener('click', function () {
    mon += 1
    price += 15
    document.querySelector('.custom .month span').innerHTML = mon
    document.querySelector('.type4 .spec p span').innerHTML = price
    document.querySelector('.vip_pay_pic p i').innerHTML = `${price}`
  })
  // 获取减号--添加点击事件
  document.querySelector('.btn_sub').addEventListener('click', function () {
    if (mon > 1) {
      mon -= 1
      price -= 15
      document.querySelector('.custom .month span').innerHTML = mon
      document.querySelector('.type4 .spec p span').innerHTML = price
      document.querySelector('.vip_pay_pic p i').innerHTML = price
    }

  })
}());
(function () {
  // 获取本地存储的用户名
  const name = localStorage.getItem('username')
  document.querySelector('.vip_type .userName').innerHTML = name
})()